// @ts-nocheck

// 客户档案

import Card, { type IColum } from '@/components/Card';
import { findByCodeList, getCountry } from '@/services/login';
import { numberToEnglish } from '@/utils';
import { chooseOptions, chooseOptionsList, genderOptions } from '@/utils/common';
import { useRequest } from 'ahooks';
import { Card as ProCard } from 'antd';
import dayjs from 'dayjs';
import { forwardRef, useEffect } from 'react';
import { useIntl } from 'umi';
type IProps = {
  data: any;
  ref?: any;
  loading: boolean;
  onOk: () => void;
};
const ApplyTable: React.FC<IProps> = forwardRef(({ data, loading, onOk }, ref) => {
  const { loanInfo, livingSituation, mortgageFlag, occupation } = data;
  // 添加符号
  const addSign = (word: string | number | React.ReactNode) => {
    return word ? <>${word}</> : '/';
  };
  // 获取下拉
  const { data: val, loading: listLoading } = useRequest(() => {
    return findByCodeList({
      code: 'apply30Record,residentialStatus,orderStatus,livingSituation,mortgageInstitutionType,occupation,employerSize,area,scope,rentTime,employerIndustry,companyType,educationStatus',
    });
  });
  const { data: countryList } = useRequest(getCountry);
  const intl = useIntl();
  const isEn = intl.locale == 'en-US';

  const currentcountryList = countryList?.data;
  const {
    employerSize: employerSizeList,
    livingSituation: livingSituationList,
    occupation: occupationList,
    orderStatus: orderStatusList,
    mortgageInstitutionType: mortgageInstitutionTypeList,
    apply30Record: apply30RecordList,
    area: areaList,
    scope: scopeList,
    rentTime: rentTimeList,
    employerIndustry: employerIndustryList,
    companyType: companyTypeList,
    educationStatus: educationStatusList,
    residentialStatus: residentialStatusList,
  } = val?.data || {};
  const list: IColum<any> = [
    {
      item: [
        {
          // 申請ID
          name: 'order.apply_id',
          key: 'orderNo',
          span: 24,
        },
        {
          name: 'user.apply_time',
          key: 'createdDate',
          render: (record) => {
            const { createdDate } = record;
            return <div>{dayjs(createdDate).format('YYYY-MM-DD')}</div>;
          },
        },
        {
          name: 'order.apply_people',
          key: 'applyPeople',
          render: (record) => {
            const { firstNameEn, lastNameEn } = record;
            return <span>{`${firstNameEn}${lastNameEn}`}</span>;
          },
        },

        {
          // 贷款产品
          name: 'order.apply_product',
          key: 'productName',
        },
        {
          name: 'order.apply_amount',
          key: 'approvedAmount',
          render: (record) => {
            const { approvedAmount, orderUserStatus: status, applyAmount, loanAmount } = record;
            const amount = status == 4 ? approvedAmount : status == 6 ? loanAmount : applyAmount;
            return addSign(amount);
          },
        },
        {
          // 贷款期限
          name: 'order.apply_term',
          key: 'applyTerm',
          render: (record) => {
            const { applyTerm, approvedLoanTerm, loanTerm, orderUserStatus: status } = record;
            const term = status == 4 ? approvedLoanTerm : status == 6 ? loanTerm : applyTerm;

            return intl.formatMessage({ id: 'order.month' }, { num: term });
          },
        },
        {
          // 状态
          name: 'product.rule_status',
          key: 'orderUserStatus',
          render: (record) => {
            const { orderUserStatus } = record;
            return orderStatusList?.find((item) => item.value == orderUserStatus)?.name;
          },
        },
      ],
      data,
      title: intl.formatMessage({ id: 'order.apply_info' }),
    },
    {
      item: [
        {
          name: 'user.number',
          key: 'userNo',
          span: 24,
        },
        {
          name: 'order.f_en',
          key: 'firstNameEn',
        },
        {
          name: 'order.l_en',
          key: 'lastNameEn',
        },
        {
          name: 'order.f_cn',
          key: 'firstNameCn',
        },
        {
          name: 'order.l_cn',
          key: 'lastNameCn',
        },
        {
          // 居民身份
          name: 'user.standing',
          key: 'residentialStatus',
          render: (record) => {
            const { residentialStatus } = record;
            return residentialStatusList?.find((item) => {
              return item.value == residentialStatus;
            })?.name;
          },
        },
        {
          // 身份证号码
          name: 'order.id_card',
          key: 'cardNumber',
        },
        {
          // 国籍
          name: 'order.nation',
          key: 'nation',
          render: (record) => {
            const { nation } = record;
            return currentcountryList?.find((item) => {
              return item.id == nation;
            })?.name;
          },
        },
        {
          // 出生年月日
          name: 'user.brithday',
          key: 'birthday',
        },
        {
          // 手机号码
          name: 'user.phone_number',
          key: 'mobile',
          render: (record) => {
            const { mobile } = record;
            return `+852 ${mobile}`;
          },
        },
        {
          // 性别
          name: 'user.sex',
          key: 'sex',
          render: (record) => {
            const { sex } = record;
            return genderOptions.find((item) => item.value == sex)?.label;
          },
        },
        {
          name: 'order.live',
          key: 'livingSituation',
          render: (record) => {
            const { livingSituation } = record;
            return livingSituationList?.find((item) => item.value == livingSituation)?.name;
          },
        },
        ...(livingSituation == '1'
          ? [
              {
                name: 'home.rent',
                key: 'rent',
                render: (record) => {
                  const { rent } = record;
                  return addSign(rent);
                },
              },
              {
                name: 'center.rentTime',
                key: 'rentTime',
                render: (record) => {
                  const { rentTime } = record;
                  return rentTimeList?.find((item) => item.value == rentTime)?.name;
                },
              },
            ]
          : []),

        ...(livingSituation == '2'
          ? [
              {
                name: 'order.has_loan',
                key: 'mortgageFlag',
                render: (record) => {
                  const { mortgageFlag } = record;
                  return chooseOptionsList?.find((item) => item.value == mortgageFlag)?.label;
                },
              },
              ...(mortgageFlag == 1
                ? [
                    {
                      name: 'order.finance_type',
                      key: 'mortgageInstitutionType',
                      render: (record) => {
                        const { mortgageInstitutionType } = record;
                        return mortgageInstitutionTypeList?.find(
                          (item) => item.value == mortgageInstitutionType,
                        )?.name;
                      },
                    },
                    {
                      name: 'order.finance_name',
                      key: 'mortgageName',
                    },
                    {
                      name: 'order.rest_loan',
                      key: 'mortgageAmount',
                      render: (record) => {
                        const { mortgageAmount } = record;
                        return mortgageAmount ? `$${mortgageAmount}` : '/';
                      },
                    },
                    {
                      name: 'order.month_loan',
                      key: 'mortgage',
                      render: (record) => {
                        const { mortgage } = record;
                        return mortgage ? `$${mortgage}` : '/';
                      },
                    },
                  ]
                : []),
            ]
          : []),
        {
          // 住宅地址
          name: 'user.address',
          key: 'address',
          span: 24,
          render: (record: any) => {
            const {
              addressArea,
              addressBuilding,
              addressFloor,
              addressRoom,
              addressScope,
              addressStreet,
              addressStreetNo,
              addressVilla,
            } = record;
            const { name, id } = areaList?.find((item) => item.value == addressArea) || {};

            const newScope = scopeList
              ?.filter((item: any) => {
                return item.parent == id;
              })
              ?.find((item) => item.value == addressScope)?.name;
            return `${name}${newScope}、${addressStreet}${addressStreetNo}、${addressVilla}、${addressBuilding}${addressFloor}${addressRoom}`;
          },
        },
      ],
      data,
      title: intl.formatMessage({ id: 'user.info' }),
    },
    {
      item: [
        {
          name: 'order.work_type',
          key: 'occupation',
          render: (record) => {
            const { occupation } = record;
            return occupationList?.find((item) => item.value == occupation)?.name;
          },
        },
        ...(occupation == '1'
          ? [
              {
                name: 'order.employ_type',
                key: 'employerIndustry',
                render: (record) => {
                  const { employerIndustry } = record;
                  return employerIndustryList?.find((item) => item.value == employerIndustry)?.name;
                },
              },
              {
                name: 'order.employ_name',
                key: 'employerName',
              },
              {
                name: 'order.work_num',
                key: 'employerSize',
                render: (record) => {
                  const { employerSize } = record;
                  return employerSizeList?.find((item) => item.value == employerSize)?.name;
                },
              },
              {
                name: 'order.work_position',
                key: 'position',
              },
              {
                name: 'order.work_month',
                key: 'salary',
                render: (record) => {
                  const { salary } = record;
                  return `HK${salary}`;
                },
              },
              {
                name: 'order.employ_address',
                key: 'companyAddressArea',
              },
            ]
          : []),
        ...(occupation == '4'
          ? [
              {
                name: 'home.month_income',
                key: 'salary',
                render: (record) => {
                  const { salary } = record;
                  return addSign(salary);
                },
              },
              {
                name: 'home.company_type',
                key: 'companyType',
                render: (record) => {
                  const { companyType } = record;
                  return companyTypeList?.find((item) => item.value == companyType)?.name;
                },
              },
            ]
          : []),
        ...(occupation == '2'
          ? [
              {
                name: 'order.employ_name',
                key: 'employerName',
              },
              {
                name: 'home.employ_address',
                key: 'companyAddressArea',
              },
              {
                name: 'home.self_job',
                key: 'position',
              },
              {
                name: 'home.month_money',
                key: 'salary',
                render: (record) => {
                  const { salary } = record;
                  return addSign(salary);
                },
              },
            ]
          : []),
        ...(occupation == '3'
          ? [
              {
                name: 'home.month_income',
                key: 'salary',
                render: (record) => {
                  const { salary } = record;
                  return addSign(salary);
                },
              },
            ]
          : []),
        ...(occupation == '6'
          ? [
              {
                name: 'home.month_money',
                key: 'salary',
                render: (record) => {
                  const { salary } = record;
                  return addSign(salary);
                },
              },
            ]
          : []),
        ...(occupation == '5'
          ? [
              {
                name: 'home.academic_qualification',
                key: 'education',
                render: (record) => {
                  const { education } = record;
                  return educationStatusList?.find((item) => item.value == education)?.name;
                },
              },
              {
                name: 'home.school_name',
                key: 'school',
              },
              {
                name: 'home.school_time',
                key: 'graduationTime',
              },
            ]
          : []),
      ],
      data,
      title: intl.formatMessage({ id: 'user.work_info' }),
    },
    {
      item: [
        {
          name: 'order.va',
          key: 'brokenFlag',
          render: (record) => {
            const { brokenFlag } = record;
            return chooseOptions?.find((item) => item.value == brokenFlag)?.label;
          },
        },
        {
          name: 'order.break',
          key: 'badDebtRecordFlag',
          render: (record) => {
            const { badDebtRecordFlag } = record;
            return chooseOptionsList?.find((item) => item.value == badDebtRecordFlag)?.label;
          },
        },
        {
          name: 'order.private_loan',
          key: 'personalLoanFlag',
          render: (record) => {
            const { personalLoanFlag } = record;
            return chooseOptionsList?.find((item) => item.value == personalLoanFlag)?.label;
          },
        },
        {
          name: 'order.debt_total',
          key: 'totalRemainingLoan',
          render: (record) => {
            const { totalRemainingLoan } = record;
            return addSign(totalRemainingLoan);
          },
        },
        {
          name: 'order.total_pay',
          key: 'loanRepayment',
          render: (record) => {
            const { loanRepayment } = record;
            return addSign(loanRepayment);
          },
        },
        {
          name: 'order.debt_num',
          key: 'loanNums',
          render: (record) => {
            const { loanNums } = record;
            return loanNums ? (
              <div>
                {loanNums}{' '}
                {intl.formatMessage({
                  id: isEn ? (loanNums > 1 ? 'home.pen' : 'home.pen_one') : 'home.pen',
                })}
              </div>
            ) : (
              '/'
            );
          },
        },
      ],
      data,
      title: intl.formatMessage({ id: 'home.financial_info' }),
      style: { marginBottom: -10 },
    },
    ...JSON.parse(loanInfo || '[]')?.map((item: any, index: number) => {
      const { name, amount, rate, lateTerm } = item;
      return {
        item: [
          {
            name: 'order.loan_name',
            render: () => {
              return <div>{name}</div>;
            },
          },
          {
            name: 'order.loan_rest_amount',
            key: 'amount',
            render: () => {
              return <div>${amount}</div>;
            },
          },
          {
            name: 'order.loan_rate',
            key: 'rate',
            render: () => {
              return <div>{rate}%</div>;
            },
          },
          {
            name: 'order.loan_rest_time',
            key: 'lateTerm',
            render: () => {
              return <div>{intl.formatMessage({ id: 'order.month' }, { num: lateTerm })}</div>;
            },
          },
        ],
        data,
        titleBg: '#89ACD5',
        title: intl.formatMessage(
          { id: 'home.pen_num' },
          { num: isEn ? numberToEnglish(index) : index + 1 },
        ),
        style: {
          marginBottom: -10,
        },
      };
    }),
    {
      item: [
        {
          name: 'order.card',
          key: 'creditCardDebtFlag',
          render: (record) => {
            const { creditCardDebtFlag } = record;
            return chooseOptionsList?.find((item) => item.value == creditCardDebtFlag)?.label;
          },
          span: 24,
        },
        {
          name: 'order.card_debt_total',
          key: 'creditCardAmount',
          render: (record) => {
            const { creditCardAmount } = record;
            return addSign(creditCardAmount);
          },
        },
        {
          name: 'order.card_debt_number',
          key: 'creditCardNum',
        },
        {
          name: 'order.apply_rencet',
          key: 'apply30Flag',
          render: (record) => {
            const { apply30Flag } = record;
            return chooseOptionsList?.find((item) => item.value == apply30Flag)?.label;
          },
        },
        {
          name: 'order.apply_record',
          key: 'apply30Record',
          render: (record) => {
            const { apply30Record } = record;
            return apply30RecordList?.find((item) => item.value == apply30Record)?.name;
          },
        },
      ],
      data,
    },
  ];
  useEffect(() => {
    if (!(loading || listLoading)) {
      onOk();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loading, listLoading]);
  return (
    <ProCard
      styles={{ body: { padding: 0 } }}
      style={{ boxShadow: 'none', marginTop: -10 }}
      bordered={false}
      className="apply_card"
    >
      <div ref={ref as any}>
        <Card list={list} />
      </div>
    </ProCard>
  );
});

export default ApplyTable;
